<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar @click-left="$router.go(-1)" :title="$route.name" left-arrow />
    <div>
      <img
        class="imgUrl"
        :src="goodsdetail.img ? $imgUrl + goodsdetail.img : ''"
        alt=""
      />
    </div>
    <p v-if="goodsdetail.price">价格：<span class="a">{{ goodsdetail.price | toPrice }}</span> </p>
    <p>商品名称:{{ goodsdetail.goodsname }}</p>
    <p>
      购买数量:
      <van-stepper v-model="num" min="1" max="5" />
    </p>
    <div>
      <van-tag v-for="item in attrArr" :key="item" type="success">{{
        item
      }}</van-tag>
    </div>
    <p>
      商品详情
    </p>
    <div v-html="goodsdetail.description"></div>
    <!-- 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button
        @click="addCart"
        type="warning"
        text="加入购物车"
      />
      <van-goods-action-button @click="goBuy" type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { getGoodsDetail, getCartAdd } from "../util/axios";
import { Toast } from "vant";
export default {
  data() {
    return {
      goodsdetail: {},
      num: 1,
      attrArr: [],
    };
  },
  mounted() {
    //触发详情方法
    this.getDetail();
  },
  methods: {
    async getDetail() {
      let res = await getGoodsDetail({ id: this.$route.query.id });
      this.goodsdetail = res[0];
      this.attrArr = this.goodsdetail.specsattr.split(",");
      console.log(this.goodsdetail, "商品详情");
    },
    //跳转到购物车
    async addCart() {
      let res = await getCartAdd({
        uid: JSON.parse(sessionStorage.getItem("user")).uid,
        goodsid: this.goodsdetail.id,
        num: this.num,
      });
      if (res.code == 200) {
        Toast.success(res.msg);
        this.$router.push("/cart");
      } else {
        Toast.fail(res.msg);
      }
    },
    //跳转到订单详情
    goBuy() {
      this.$router.push("/order");
    },
  },
};
</script>

<style scoped>
.imgUrl {
  width: 100%;
  height: 4rem;
}
p{
  margin-top: .5rem;
  font-size: 16px;
}
.a{
  color: red;
  font-size: 16px;
}
</style>
